<template>
  <div class="my-step">
    <el-steps direction="vertical" :active="setpIndex" :space="80" finish-status="success">
      <el-step :title="cStepList[index]" icon="" v-for="(item, index) in checkRecordList">
        <template v-slot:description>
          <div style="color: #909399">
            操作人：{{ item.approveUserName }}
          </div>
          <div style="color: #909399" v-if="index > 2">
            操作结果：
            <span
              :class="!item.approveStatus ? 'danger' : (item.approveStatus == 1 ? 'success' : (item.approveStatus == 2 ? 'warning' : 'danger'))">
              {{ resultList[item.approveStatus] }}
            </span>
          </div>
          <div style="color: #909399">
            操作备注：
            <span
              :class="!item.approveStatus ? 'danger' : (item.approveStatus == 1 ? 'success' : (item.approveStatus == 2 ? 'warning' : 'danger'))">
              {{ item.approveDescription }}
            </span>
          </div>
          <div style="color: #909399">操作时间：{{ item.lastModifiedTs }}</div>
          <div style="color: grey;">
            下一个操作人：<span style="color: black;">{{ item.remark }}</span>
          </div>
        </template>
      </el-step>
    </el-steps>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { getGCheckStep } from '@/api/yearCheck/index'

onMounted(() => {
    console.log('onMounted')
});
const props = defineProps({
  currentRow: {
    type: Object,
    default: {}
  }
})
const setpIndex = ref(3)

let checkRecordList = ref([])
let resultList = ref(['', '合格', '基本合格', '不合格'])
let cStepList = ref(['提交申请', '登记单位校对', '主管单位管理员指派', '主管单位经办人审核', '主管单位分管领导审核', '登记单位审核', ''])
const getCStepList = () => {
  getGCheckStep(props.currentRow.id).then(res => {
    checkRecordList.value = res.data;
    setpIndex.value = findIndexOfFirstNullI(checkRecordList.value)
    console.log(setpIndex.value)
  })
}

function findIndexOfFirstNullI(arr) {
  for (let i = 0; i < arr.length; i++) {
    if (!arr[i].approveStatus) {
      return i; // 返回第一个i为null的对象的索引
    }
  }
  return -1; // 如果没有找到，返回-1
}

getCStepList()

</script>

<style scoped lang="scss">
.el-table {
  --el-table-row-hover-bg-color: rgba(39, 137, 238, 0.1);
  --el-table-border-color:#e0e5f0;
}
:deep(.el-card.is-always-shadow) {
  box-shadow: 0 1px 14px 0 rgba(209, 224, 239, 0.6)
}

/* 拉框选中 */
.el-select-dropdown__item {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

/* 鼠标经过下拉框 */
.el-select-dropdown__item:hover {
  height: 24px;
  line-height: 24px;
  font-size: 1px;
}

.el-select-dropdown__item.selected {
  color: #2789EE;
}
.danger-col {
  color: #909399;
}

.success-col {
  color: #909399;
}

.danger {
  color: red;
}

.success {
  color: #67c23a;
}

.warning {
  color: #dd5f0b;
}
</style>
